<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>交通监测</title>
  <link rel="icon" type="image/x-icon" href="../../images/logo.png">
  <!-- 下拉框 -->
  <link rel="stylesheet" href="../../plugin/M_select/js/M_select/M_select.css">
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/traffic.css">
</head>
<body>
<div class="box">
  <!-- 头部 -->
  <div class="header-box">
    <img src="../../images/headeBg.png" alt="">
    <div class="weather-box">
      <span>郑州 小雨转多云 32/16℃</span>
    </div>
    <h1 class="header-title"><img src="../../images/header.png" alt=""></h1>
    <div class="header-action">
      <span class="action-time"></span>
      <a href="javascript:;">管理中心</a>
      <a href="javascript:;">退出</a>
    </div>
  </div>
  <div class="main-box">
    <!-- 侧边导航 -->
    <ul class="aside-box">
      <li>
        <a href="../home.html">
                            <span>
                                <img class="aside-img" src="../../images/home.png" alt="">
                                <img class="aside-imgA " src="../../images/homeA.png" alt="">
                                首页
                            </span>
        </a>
      </li>
      <li class="active">
        <a href="./development.html">
                                <span>
                                    <img class="aside-img" src="../../images/huanjing.png" alt="">
                                    <img class="aside-imgA" src="../../images/huanjingA.png" alt="">
                                    产业发展环境
                                </span>
        </a>
      </li>
      <li>
        <a href="../basic/basic.html">
                            <span>
                                <img class="aside-img" src="../../images/yaosu.png" alt="">
                                <img class="aside-imgA" src="../../images/yaosuA.png" alt="">
                                产业基础要素
                            </span>
        </a>
      </li>
      <li>
        <a href="../passengerFlow/destination.html">
                            <span>
                                <img class="aside-img" src="../../images/keliu.png" alt="">
                                <img class="aside-imgA" src="../../images/keliuA.png" alt="">
                                旅游客流监测
                            </span>
        </a>
      </li>
      <li>
        <a href="../productTesting/index.html">
                            <span>
                                <img class="aside-img" src="../../images/chanpin.png" alt="">
                                <img class="aside-imgA" src="../../images/chanpinA.png" alt="">
                                旅游产品监测
                            </span>
        </a>
      </li>
      <li>
        <a href="../enterprise/scenicMonitor.html">
                            <span>
                                <img class="aside-img" src="../../images/qiye.png" alt="">
                                <img class="aside-imgA" src="../../images/qiyeA.png" alt="">
                                旅游企业监测
                            </span>
        </a>
      </li>
      <li>
        <a href="../tourismProject/index.html">
                            <span>
                                <img class="aside-img" src="../../images/xiangmu.png" alt="">
                                <img class="aside-imgA" src="../../images/xiangmuA.png" alt="">
                                旅游项目监测
                            </span>
        </a>
      </li>
      <li>
        <a href="../brand/brand.html">
                            <span>
                                <img class="aside-img" src="../../images/pinpai.png" alt="">
                                <img class="aside-imgA" src="../../images/pinpaiA.png" alt="">
                                旅游品牌监测
                            </span>
        </a>
      </li>
    </ul>
    <!-- 主题内容 -->
    <div class="content-box">
      <div class="content-nav-box">
        <a href="development.html">发展环境监测 </a>
        <a href="weather.html"> 环境气象监测</a>
        <a class="active" href="#">交通监测</a>
        <a href="lyrical.html">舆情监测</a>
      </div>
      <div class="main-box">
        <div class="left-box">
          <div class="left-main">
            <div class="title-box">
              <h3>
                <img src="../../images/titile-img.png">
                交通监测
              </h3>
            </div>
            <div class="select-city">
              <div class="city-box" data-toggle="distpicker" id="distpicker3">
                <select></select>
                <select></select>
              </div>
              
              <div class="input-box">
                <input type="text" placeholder="输入关键字">
                <button><img src="../../images/search.png" alt="搜索"></button>
              </div>
            </div>
            <div class="radio-box">
              <div>
                <input type="radio" checked id="highSpeed" name="traffic">
                <label for="highSpeed">高速</label>
                <input type="radio" id="trainStation" name="traffic">
                <label for="trainStation">火车站</label>
                <input type="radio" id="railStation" name="traffic">
                <label for="railStation">高铁站</label>
              </div>
              <div>
                <input type="radio" id="airport" name="traffic">
                <label for="airport">机场</label>
                <input type="radio" id="busStation" name="traffic">
                <label for="busStation">长途汽车站</label>
                <input type="radio" id="scenicSpot" name="traffic">
                <label for="scenicSpot">景区</label>
              </div>
            </div>
          </div>
          <div class="passenger-flow">
            <div>
              <div class="title-box">
                <h3>
                  <img src="../../images/titile-img.png">
                  年度客流量分析
                </h3>
              </div>
              <div class="echarts-box" id="yearPassenger">
              </div>
              <div class="radio-list">
                <input type="radio" id="highway_y" name="yearType" checked>
                <label for="highway_y">
                  <i></i>
                  <span>公路</span>
                </label>
                <input type="radio" id="railway_y" name="yearType">
                <label for="railway_y">
                  <i></i>
                  <span>铁路</span>
                </label>
                <input type="radio" id="highSpeedRail_y" name="yearType">
                <label for="highSpeedRail_y">
                  <i></i>
                  <span>高铁</span>
                </label>
                <input type="radio" id="airporty_y" name="yearType">
                <label for="airporty_y">
                  <i></i>
                  <span>公路</span>
                </label>
              </div>
            </div>
            <div>
              <div class="title-box">
                <h3>
                  <img src="../../images/titile-img.png">
                  月度客流量分析
                </h3>
              </div>
              <div class="echarts-box" id="monthlyPassenger">
              </div>
              <div class="radio-list">
                <input type="radio" id="highway_m" name="monthlyType" checked>
                <label for="highway_m">
                  <i></i>
                  <span>公路</span>
                </label>
                <input type="radio" id="railway_m" name="monthlyTypee">
                <label for="railway_m">
                  <i></i>
                  <span>铁路</span>
                </label>
                <input type="radio" id="highSpeedRail_m" name="monthlyType">
                <label for="highSpeedRail_m">
                  <i></i>
                  <span>高铁</span>
                </label>
                <input type="radio" id="airporty_m" name="monthlyType">
                <label for="airporty_m">
                  <i></i>
                  <span>公路</span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="title-box">
            <h3>
              <img src="../../images/titile-img.png">
              实时路况
            </h3>
            <div>
              <button class="congestion-btn">拥堵</button>
              <button class="amble-btn">缓行</button>
              <button class="smooth-btn">畅通</button>
              <button>路况信息</button>
            </div>
          </div>
          <div class="map-box">
            <div class="map" id="allmap"></div>
            <div class="map-info">
              <div>
                <div>
                  <i>
                    <img src="../../images/icon-roadControl.png">
                    <span>道路管制</span>
                  </i>
                  <p>共0条</p>
                </div>
                <ul></ul>
              </div>
              <div>
                <div>
                  <i>
                    <img src="../../images/icon-trafficIncident.png">
                    <span>交通事故</span>
                  </i>
                  <p>共0条</p>
                </div>
                <ul></ul>
              </div>
              <div>
                <div class="active">
                  <i>
                    <img src="../../images/icon-toll.png">
                    <span>收费站管制</span>
                  </i>
                  <p>共4条</p>
                </div>
                
                <ul class="scrollbar">
                  <li>
                    <span>1</span>
                    <p>
                      通许东收费站 大广高速（G5）开封至通许端段双向管制中
                    </p>
                  </li>
                  <li>
                    <span>2</span>
                    <p>
                      通许东收费站 大广高速（G5）开封至通许端段双向管制中
                    </p>
                  </li>
                  <li>
                    <span>3</span>
                    <p>
                      通许东收费站 大广高速（G5）开封至通许端段双向管制中
                    </p>
                  </li>
                  <li>
                    <span>4</span>
                    <p>
                      通许东收费站 大广高速（G5）开封至通许端段双向管制中
                    </p>
                  </li>
                </ul>
              </div>
              <div>
                <div>
                  <i>
                    <img src="../../images/icon-conservation.png">
                    <span>养护施工</span>
                  </i>
                  <p>共0条</p>
                </div>
                <ul></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script src="../../plugin/jquery-1.11.1.min.js"></script>
<script src="../../plugin/M_select/js/M_select/M_select.js"></script>
<script src="../../plugin/ECharts/echarts.js"></script>
<script src="../../plugin/ECharts/china.js"></script>
<script src="../../js/common.js"></script>
<script src="../../plugin/ECharts/echarts-wordcloud.min.js"></script>
<!-- 省市 -->
<script src="../../plugin/jQueryProvinces/distpicker.data.js"></script>
<script src="../../plugin/jQueryProvinces/distpicker.js"></script>
<script src="../../plugin/jQueryProvinces/main.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<script src="../../js/traffic.js"></script>
<script type="text/javascript">
  $("#distpicker3").distpicker({
    province: "河南省",
    city: "郑州市",
  });
  $(function () {
    // 对所有下拉款进行初始化

    $(".select01").M_select({
      // 手动添加下拉款图片（以html页面为起始位置写路径）
      "Img": "../../plugin/M_select/js/M_select/up4.png",
      "Img2": "../../plugin/M_select/js/M_select/down4.png",
      "radius": "4px",
      "Title": "选择城市",
      "inputName": "selected_value",
      // 默认选中的值（参数值写需要选中的select的value值）
      "selected": "03",
      Succee: function () {
        site = $('#selectCity').val()
        console.log(site)
      }
    });
  });
  // 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(113.64, 34.75), 15);  // 初始化地图,设置中心点坐标和地图级别
  //添加地图类型控件
  map.addControl(new BMap.MapTypeControl({
    mapTypes: [
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
    ]
  }));
  map.setCurrentCity("郑州");          // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  map.setMapStyle({style: 'midnight'})
  //默认地图样式(normal)
  //清新蓝风格(light)
  //黑夜风格(dark)
  //清新蓝绿风格(bluish)
  //高端灰风格(grayscale)
  //强边界风格(hardedge)
  //青春绿风格(darkgreen)
  //浪漫粉风格(pink)
  //午夜蓝风格(midnight)
  //自然绿风格(grassgreen)
  //精简风格(googlelite)
  //红色警戒风格(redalert)
  
  
</script>

</html>
